<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="827px"
  >
    <!-- 标题栏 -->
    <div class="title">
      <div>意见反馈</div>
      <i class="iconfont icon-guanbi2fill" @click="dialogVisible = false"></i>
    </div>
    <div style="padding: 0 36px 30px 36px">
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="问题类型" prop="type">
          <div>
            <el-radio-group v-model="form.type">
              <el-radio-button label="界面视觉">界面视觉</el-radio-button>
              <el-radio-button label="BUG">BUG</el-radio-button>
              <el-radio-button label="功能">功能</el-radio-button>
              <el-radio-button label="其他">其他</el-radio-button>
            </el-radio-group>
          </div>
        </el-form-item>

        <!-- 问题描述 -->
        <el-form-item label="问题描述" prop="description">
          <el-input
            type="textarea"
            v-model="form.description"
            rows="5"
            resize="none"
            placeholder="请详细描述您遇到的问题..."
          ></el-input>
        </el-form-item>
        <!-- 图片上传 -->
        <el-form-item label="添加图片" prop="images">
          <el-upload
            :class="form.images.length >= 5 ? 'hide' : ''"
             action="/api/frontend/file/upload"
                :headers="{ Authorization: token }"
            list-type="picture-card"
            :limit="5"
            :on-exceed="handleExceed"
            :file-list="form.images"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
              :on-success="handleSuccess"
            :show-file-list="true"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="upload-tip">
            单张图片大小不能超过2M，最多可上传5张图片
          </div>
        </el-form-item>

        <!-- 联系方式 -->
        <el-form-item label="联系方式" prop="contact">
          <el-input
            v-model="form.contact"
            placeholder="请输入您的邮箱和手机号"
          ></el-input>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <div style="display: flex; justify-content: center">
            <el-button
              style="width: 120px; height: 48px"
              type="primary"
              @click="submitForm"
              >提交</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import service from "@/service/service";
import { cookieGet } from "@/storageCookie";
export default {
  name: "FeedbackDialog",
  data() {
    return {
      token: cookieGet("tsgfAuthorization"),
      dialogVisible: false,
      form: {
        type: "界面视觉",
        description: "",
        images: [
         
        ],
        contact: "",
      },
      rules: {
        type: [
          { required: true, message: "请选择问题类型", trigger: "change" },
        ],
        description: [
          { required: true, message: "请输入问题描述", trigger: "blur" },
        ],
        contact: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              // 简单验证手机号或邮箱格式
              const phoneReg = /^1[3-9]\d{9}$/;
              const emailReg =
                /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

              if (phoneReg.test(value) || emailReg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入有效的手机号或邮箱"));
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    // 判断是否达到上传上限
    isUploadLimitReached() {
      return this.form.images.length >= 5;
    },
  },
  methods: {
    handleSuccess(response, file, fileList) {
  // 将上传成功的文件信息添加到 form.images
  console.log(response, file, fileList,'1111');
  
  this.form.images = fileList;
},
    // 打开对话框
    openFeedbackDialog() {
      this.dialogVisible = true;
    },

    // 处理图片超出数量限制
    handleExceed() {
      this.$message.warning("最多只能上传5张图片");
    },

    // 移除图片
    handleRemove(file, fileList) {
      this.form.images = fileList;
    },

    // 图片上传前校验（格式、大小）
    beforeUpload(file) {
      const isImage = file.type.includes("image"); // 校验是否为图片格式
      const isLt2M = file.size / 1024 / 1024 < 2; // 校验大小不超过2MB

      if (!isImage) {
        this.$message.error("请上传图片格式文件（JPG/PNG等）");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2MB");
      }

      return isImage && isLt2M;
    },

    // 提交表单
    async submitForm() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          try {
            const response = await service({
              url: "/frontend/feedback/add",
              method: "post",
              data: {
                feedbackType: this.form.type,
                feedbackContent: this.form.description,
                fileIds: this.form.images.map((item) => item.response.data),
                contact: this.form.contact,
              },
            });
            if (response.code === 200) {
              console.log("11111");
              this.$message.success("意见反馈提交成功，感谢您的反馈！");
              this.dialogVisible = false;
              this.resetForm();
            } else {
              this.$message.error(response.msg);
            }
          } catch (error) {
            this.$message.error("提交失败，请稍后重试", error);
          }
        } else {
          this.$message.error("请完善表单信息后提交");
          return false;
        }
      });
    },

    // 取消表单
    cancelForm() {
      this.dialogVisible = false;
      this.resetForm();
    },

    // 重置表单
    resetForm() {
      this.$refs.formRef.resetFields();
      this.form.images = [];
      this.form.type = "界面视觉";
    },
  },
};
</script>

<style lang="scss" scoped>
.hide {
  :deep(.el-upload--picture-card) {
    display: none;
  }
}
::v-deep .el-upload-list__item-status-label {
  display: none !important;
}
::v-deep .el-radio-button__inner {
  border-radius: 4px;
  margin-left: 10px;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: none;
}
::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: none;
}
::v-deep .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
  box-shadow: none;
}

::v-deep .el-dialog__header {
  display: none; // 隐藏默认头部
}

::v-deep .el-dialog__body {
  padding: 0; // 调整内容区边距
}
::v-deep .el-form-item__label {
  display: contents;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 26px;
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 28px;
  div {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 24px;
    color: #333333;
  }
  i {
    font-size: 22px;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 135px;
  height: 135px;
  line-height: 135px;
  //   margin: 0px 8px 8px 0
  margin-right: 15px;
}

::v-deep .el-upload--picture-card {
  width: 135px;
  height: 135px;
  line-height: 135px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
